<!-- Primary content -->
<div class="container mx-auto px-4 py-8">
    <div class="container text-center justify-center mx-auto mb-4 text-black dark:text-white">
        <span class="flex items-center justify-center pb-4">
            <img class="rounded-xl" src="{{ .BaseURL }}{{ .Profile }}" alt="Avatar">               
        </span>
        <h1 class="text-2xl font-bold dark:text-white mt-4 mb-4">Hi there</h1>
        <h2 class="text-4xl font-bold dark:text-white mt-4 mb-8">{{ .User }}!</h2>
        
        {{ if .Redirect }}
        <span class="inline-flex items-center gap-1 px-2 py-1 rounded-full text-2xl font-medium 
                    bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-300">
            You will be redirected in a few seconds...
        </span>
        {{ else }}
        <span id="red_message" class="hidden inline-flex items-center mt-4 gap-1 px-2 py-1 rounded-full text-2xl font-medium bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"></span>
        {{ end }}

        {{ if not .Redirect }}
        {{ if .VerifyRequired }}
        <a href="{{ .BaseURL }}/verify?redirect={{ .Redirect }}" type="button" class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="verify" type="button" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M14 20V44" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path
                        d="M30 11.76L28 20H39.66C40.281 20 40.8934 20.1446 41.4489 20.4223C42.0043 20.7 42.4874 21.1032 42.86 21.6C43.2326 22.0968 43.4844 22.6735 43.5955 23.2845C43.7066 23.8954 43.6739 24.5239 43.5 25.12L38.84 41.12C38.5977 41.9509 38.0924 42.6807 37.4 43.2C36.7076 43.7193 35.8655 44 35 44H8C6.93913 44 5.92172 43.5786 5.17157 42.8284C4.42143 42.0783 4 41.0609 4 40V24C4 22.9391 4.42143 21.9217 5.17157 21.1716C5.92172 20.4214 6.93913 20 8 20H13.52C14.2642 19.9996 14.9935 19.7916 15.6259 19.3994C16.2583 19.0073 16.7688 18.4464 17.1 17.78L24 4C24.9432 4.01168 25.8715 4.23634 26.7156 4.65719C27.5597 5.07805 28.2979 5.68421 28.8748 6.43041C29.4518 7.1766 29.8526 8.04352 30.0475 8.9664C30.2423 9.88929 30.2261 10.8443 30 11.76Z"
                        stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                Verify Email
            </span>
            </button>
        </a>
        {{ else }}
        <div class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="go" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M42 34C42 32.9391 41.5786 31.9217 40.8284 31.1716C40.0783 30.4214 39.0609 30 38 30H10C8.93913 30 7.92172 30.4214 7.17157 31.1716C6.42143 31.9217 6 32.9391 6 34V38C6 39.0609 6.42143 40.0783 7.17157 40.8284C7.92172 41.5786 8.93913 42 10 42H38C39.0609 42 40.0783 41.5786 40.8284 40.8284C41.5786 40.0783 42 39.0609 42 38V34Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 30V26" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M24 30V18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M24 18C27.3137 18 30 15.3137 30 12C30 8.68629 27.3137 6 24 6C20.6863 6 18 8.68629 18 12C18 15.3137 20.6863 18 24 18Z" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>                                           
                Let's go!
            </span>
            </button>
        </div>
        {{ end }}

        <a href="{{ .BaseURL }}/logout?redirect={{ .Redirect }}" type="button" class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="logout" type="button" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 42H10C8.93913 42 7.92172 41.5786 7.17157 40.8284C6.42143 40.0783 6 39.0609 6 38V10C6 8.93913 6.42143 7.92172 7.17157 7.17157C7.92172 6.42143 8.93913 6 10 6H18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M32 34L42 24L32 14" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M42 24H18" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>                    
                Logout
            </span>
            </button>
        </a>
        {{ if not .OAuthOnly }}
        <a href="{{ .BaseURL }}/reset?redirect={{ .Redirect }}" type="button" class="flex flex-wrap block flex-column gap-3 justify-center mt-2 px-4">
            <button id="reset" type="button" class="w-full px-6 py-3 bg-white dark:bg-gray-600 hover:font-bold hover:bg-red-400 dark:hover:bg-red-400 text-black dark:text-white hover:text-white rounded-xl 
                    font-medium transition-all duration-300 
                    hover:shadow-lg hover:shadow-red-500/30 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 
                    active:scale-95">
            <span class="flex items-center justify-center gap-2 text-2xl">
                <svg width="48" height="48" viewBox="0 0 48 48" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M31 15L35.6 19.6C35.9739 19.9665 36.4765 20.1717 37 20.1717C37.5235 20.1717 38.0261 19.9665 38.4 19.6L42.6 15.4C42.9665 15.0261 43.1717 14.5235 43.1717 14C43.1717 13.4765 42.9665 12.9739 42.6 12.6L38 8"
                        stroke="currentColor" stroke-width="3" stroke-linecap="round"
                        stroke-linejoin="round" />
                    <path d="M41.9998 4L22.7998 23.2" stroke="currentColor" stroke-width="3"
                        stroke-linecap="round" stroke-linejoin="round" />
                    <path
                        d="M15 42C21.0751 42 26 37.0751 26 31C26 24.9249 21.0751 20 15 20C8.92487 20 4 24.9249 4 31C4 37.0751 8.92487 42 15 42Z"
                        stroke="currentColor" stroke-width="3" stroke-linecap="round"
                        stroke-linejoin="round" />
                </svg>                 
                Reset password
            </span>
            </button>
        </a>
        {{ end }}
        {{ end }}
    </div>
</div>

<!-- Auto-Redirect script -->
<script type="text/javascript" onload>
if ((!"{{ .VerifyRequired }}") && ("{{ .Redirect }}" != "")) {
    setTimeout(() => {
        window.location.href = "{{ .Redirect }}";
    }, 3000);
} else {
    $(`#go`)[0].addEventListener("click", async function(event) {
        window.location.replace("/");
    });
}
</script>